<template>
    <view
        :class="'container-popup ' + (showClone ? 'popup-show' : '') + ' ' + ('l-popup-' + direction === null ? contentAlignClone : direction) + ' l-class'"
        :style="'z-index:' + zIndex + ';'"
        @touchmove.stop.prevent="doNothingMove"
    >
        <view class="container-bg l-bg-class"></view>
        <view
            v-if="showClone"
            :class="
                'popup-content ' +
                (showClone ? (direction === null ? contentAlignClone : direction) : '') +
                ' popup-fade-' +
                (direction === null ? contentAlignClone : direction) +
                '-active-' +
                ((transition === null ? animationClone : transition) ? status : '') +
                ' l-panel-class'
            "
            @tap.stop.prevent="onPopupTap"
        >
            <view @tap.stop.prevent="doNothingTap">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
import zIndex from '../behaviors/zIndex';
import validator from '../behaviors/validator';
import eventUtil from '../core/utils/event-util';
export default {
    data() {
        return {
            status: 'show',
            zIndex: '',
            showClone: false,
            contentAlignClone: '',
            animationClone: ''
        };
    },
    mixins: [zIndex, validator],
    externalClasses: ['l-bg-class', 'l-panel-class', 'l-class'],
    props: {
        show: {
            type: Boolean,
            default: false
        },
        animation: {
            type: Boolean,
            default: true
        },
        transition: {
            type: Boolean,
            default: null
        },
        contentAlign: {
            type: String,
            default: 'center',
            options: ['top', 'right', 'left', 'bottom', 'center']
        },
        direction: {
            type: String,
            default: null,
            options: ['top', 'right', 'left', 'bottom', 'center']
        },
        locked: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this._init();
        },

        _init() {
            uni.lin = uni.lin || {};
            uni.lin.showPopup = (t) => {
                const {
                    zIndex: e = 99,
                    animation: o = true,
                    contentAlign: i = 'center',
                    locked: a = false
                } = {
                    ...t
                };
                this.setData({
                    zIndex: e,
                    animationClone: o,
                    contentAlignClone: i,
                    lockedClone: a,
                    showClone: true
                });
            };
            uni.lin.hidePopup = () => {
                this.setData({
                    status: 'hide'
                });
                setTimeout(() => {
                    this.setData({
                        showClone: false
                    });
                }, 300);
            };
        },

        doNothingMove() {},
        doNothingTap() {},

        onPopupTap() {
            if (true !== this.lockedClone) {
                if (this.showClone) {
                    this.setData({
                        status: 'hide'
                    });
                    setTimeout(() => {
                        this.setData({
                            showClone: false,
                            status: 'show'
                        });
                    }, 300);
                } else {
                    this.setData({
                        showClone: true,
                        status: 'show'
                    });
                }
            }
            eventUtil.emit(this, 'lintap', true);
        }
    },
    created: function () {}
};
</script>
<style>
.popup-fade-center-active-show {
    animation: popup-center-fadein 0.3s forwards;
}
.popup-fade-center-active-hide {
    animation: popup-center-fadeout 0.3s forwards;
}
.popup-fade-top-active-show {
    animation: popup-top-fadein 0.3s forwards;
}
.popup-fade-top-active-hide {
    animation: popup-top-fadeout 0.3s forwards;
}
.popup-fade-left-active-show {
    animation: popup-left-fadein 0.3s forwards;
}
.popup-fade-left-active-hide {
    animation: popup-left-fadeout 0.3s forwards;
}
.popup-fade-right-active-show {
    animation: popup-right-fadein 0.3s forwards;
}
.popup-fade-right-active-hide {
    animation: popup-right-fadeout 0.3s forwards;
}
.popup-fade-bottom-active-show {
    animation: popup-bottom-fadein 0.3s forwards;
}
.popup-fade-bottom-active-hide {
    animation: popup-bottom-fadeout 0.3s forwards;
}
@keyframes popup-top-fadein {
    0% {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes popup-top-fadeout {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -100%, 0);
        opacity: 0.1;
    }
}
@keyframes popup-left-fadein {
    0% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes popup-left-fadeout {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0.1;
    }
}
@keyframes popup-right-fadein {
    0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes popup-right-fadeout {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0.1;
    }
}
@keyframes popup-bottom-fadein {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes popup-bottom-fadeout {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 100%, 0);
        opacity: 0.1;
    }
}
@keyframes popup-center-fadein {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes popup-center-fadeout {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}
.container-popup {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.popup-show {
    visibility: visible;
}
.popup-show .container-bg {
    display: block;
    opacity: 1;
}
.container-bg {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out;
}
.popup-bg {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 90;
}
.popup-content {
    position: absolute;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.center {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.left {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100%;
}
.bottom {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
}
</style>
